<?php
?>
<!-- Status Bar  -->
	<div id="status_bar">
        <div id="home_link">
        	<img src="app_icon.png" src_app="app_icon.png" src_busy="/lib/images/busy_color.gif" id="home_link_icon"></img>
			<div class="user_name_display"></div>
		</div>
	</div>

<!-- Page Shadow (for modal/dialog) -->
	<div id="page_shadow"></div>

<!-- Wapp Panel -->
	<div id="wapp_panel" title="Wapp Panel" class="wapp_dialog">
		<div class="wapp_dialog_main"></div>
	</div>

<!-- Wapp Menu -->
	<div id="wapp_menu" title="Wapp Menu" class="wapp_dialog">
		<div class="wapp_dialog_main"></div>
	</div>

<!-- Debug -->
	<div id="debug_div" title="Debug" class="wapp_dialog">
		<div class="wapp_dialog_main" style="text-align:center;">
			<button style="width:120px;" onclick="$('#debug').html('');">Clear Debug</button>
			<div id="debug"></div>
		</div>
	</div>

<!-- Login Screen -->
	<div id="login" title="Login" class="wapp_dialog">
		<div class="wapp_dialog_main">
			<div class="row login_item">
				<label>User Name</label>
				<input type="text" id="loginName" value=""/>
			</div>
			<div class="row login_item">
				<label>Password</label>
				<input type="password" style="" id="loginPass" value=""/>
			</div>
			<div class="crow" id="login_status_label" style="text-align:center; border-bottom:0;">
				Please login.
			</div>
			<div class="crow login_item" style="text-align:center;border-bottom:0;height: 40px;">
				<button style="width:120px;" onclick="wapp.login()">Login</button>
			</div>
			<div class="crow logout_item" style="text-align:center;border-bottom:0;height: 40px;">
				<button style="width:120px;" onclick="wapp.logout()">Logout</button>
			</div>
		</div>
	</div>


<!-- Wapp Settings -->
    <form id="settings" title="Settings" class="wapp_dialog">
		<h2>Offline Cache</h2>
		<fieldset>
            <div class="row">
                <label>Cache</label>
                <div id="offline_cache_toggle" class="toggle" onclick="wapp.cache.toggle()" toggled="false"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
			<div class="crow">
				<label>Files</label>
				<span id="cache_file_cnt"></span>
			</div>
			<div class="crow">
				<label>Total Size</label>
				<span id="cache_total_size"></span>
			</div>
			<div class="crow">
				<label>Last Update</label>
				<span id="cache_last_update"></span>
			</div>
			<div class="crow" style="border-bottom:0;height: 45px;">
				<div class="cache_update_progress ui-progressbar"></div>
			</div>
			<div class="crow" style="text-align:center;border-bottom:0; display:none;">
				<button style="width:120px;" onclick="wapp.cache.clear();">Clear Cache</button>
				<button style="width:120px;" onclick="wapp.cache.refresh();">Refresh Cache</button>
				<button style="width:120px;" onclick="wapp.cache.update();">Update</button>
				<button style="width:120px;" onclick="wapp.cache.swap();">Swap Cache</button>
				<button style="width:120px;" onclick="wapp.restartApp();">Restart App</button>
			</div>
		</fieldset>
        <h2>Preferences</h2>
        <fieldset>
            <div class="row">
                <label>Local</label>
                <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
            <div class="row">
                <label>Other</label>
                <div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
        </fieldset>

        <h2>Map Settings</h2>
        <fieldset>
            <div class="row">
                <label>Geolocation</label>
                <div id="enable_geolocation" class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
        </fieldset>

        <h2>User</h2>
        <fieldset>
            <div class="row">
                <label>Name</label>
                <input type="text" name="userName" value=""/>
            </div>
            <div class="row">
                <label>Password</label>
                <input type="password" name="password" value=""/>
            </div>
            <div class="row">
                <label>Confirm</label>
                <input type="password" name="password" value=""/>
            </div>
        </fieldset>
        <fieldset>
			<div class="crow" style="text-align:center;">
				<button style="width:120px;" onclick="runner.load_settings(); return false;">Load</button>
				<button style="width:120px;" onclick="runner.save_settings(); return false;">Save</button>
				<button style="width:120px;" onclick="runner.reset_settings(); return false;">Reset</button>
			</div>
		</fieldset>
    </form>